<template>
  <el-form ref="form" :model="form" label-width="150px" class="form-email" :rules="rules">
    <el-form-item label="服务器地址：" prop="ServerHost">
      <el-input v-model="form.ServerHost" size="small"></el-input>
    </el-form-item>
    <el-form-item label="服务器端口：" prop="ServerPort">
      <el-input v-model.number="form.ServerPort" size="small"></el-input>
    </el-form-item>
    <el-form-item label="发件人邮箱地址：" prop="FromEmail">
      <el-input v-model="form.FromEmail" size="small"></el-input>
    </el-form-item>
    <el-form-item label="发件人邮箱密码：" prop="FromPasswd">
      <el-input v-model="form.FromPasswd" size="small" :type='type'>
        <i slot="suffix" class="el-input__icon iconfont" :class="icon" @click="showPasswd"></i>
      </el-input>
    </el-form-item>
    <el-form-item label="是否启用：">
      <el-switch v-model="form.IsOpen"></el-switch>
    </el-form-item>
    <el-form-item label="测试邮箱：">
      <el-input v-model="email" size="small" placeholder="请输入测试邮箱地址"></el-input>
      <el-button size="small" type="primary" plain @click="test">测试</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="update">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  getEmail,
  updateEmail,
  testEmail
} from '@/utils/apiPath'
export default {
  data() {
    return {
      form: {
        ServerHost: '',
        ServerPort: '',
        FromEmail: '',
        FromPasswd: '',
        IsOpen: false
      },
      email: '',
      rules: {
        ServerHost: [{ required: true, message: '请输入邮箱服务器地址', trigger: 'blur' }],
        ServerPort: [
          { required: true, message: '请输入邮箱服务器端口', trigger: 'blur' },
          { pattern: /^\d*$/, message: '请输入正确的端口', trigger: ['blur', 'change']}
        ],
        FromEmail: [
          { required: true, message: '请输入发件人邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
        FromPasswd: [{ required: true, message: '请输入发件人邮箱密码', trigger: 'blur' }]
      },
      type: 'password',
      icon: 'iconguanbi'
    }
  },
  mounted() {
    this.getEmail()
  },
  methods: {
    showPasswd() {
      if (this.type === 'text') {
        this.type = 'password'
        this.icon = 'iconguanbi'
      } else {
        this.type = 'text'
        this.icon = 'iconxianshimima'
      }
    },
    getEmail() {
      getEmail().then(res => {
        this.form = res.data
      })
    },
    test() {
      if (this.email) {
        if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email)) {
          testEmail({
            email: this.email
          }).then(res => {
            this.$message.success('邮箱可用')
          })
        } else {
          this.$message.error('请输入正确的邮箱地址')
        }
        
      } else {
        this.$message.error('测试邮箱地址不能为空！')
      }
    },
    update() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateEmail(this.form).then(res => {
            this.$message.success('更新成功')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-email {
  height: 100%;
  background-color: #ffffff;
  padding: 40px;
  /deep/.el-input {
    width: 360px;
    .el-input__inner {
      border-radius: 2px;
    }
    .el-input__suffix {
      right: 12px;
      color: #333;
      cursor: pointer;
    }
  }
}
</style>